<template>
    <div
        class="goods_item"
        v-for="item of list"
        :key="item.goodsId"
        @click="go2detail(item.goodsId)"
    >
        <img :src="$filters.prefix(item.goodsCoverImg)" alt="" />
        <p class="goods_item_des">{{ item.goodsName }}</p>
        <p class="goods_item_price">¥ {{ item.sellingPrice }}</p>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
    props: ["list"],
    setup() {
        const router = useRouter();
        const go2detail = (id: string | number) => {
            router.push("/product/" + id);
        };
        return { go2detail };
    },
});
</script>

<style lang="scss" scoped>
.goods_item {
    display: inline-block;
    width: 50%;
    height: 210px;
    text-align: center;
    border-bottom: 1px solid #e9e9e9;
    padding: 10px;
    overflow: hidden;
    &:nth-of-type(2n + 1) {
        border-right: 1px solid #e9e9e9;
    }
    img {
        width: 120px;
        height: 120px;
    }
    &_des {
        line-height: 18px;
        color: #222333;
        font-size: 14px;
        @include text-ellipsis;
    }
    &_price {
        color: #1baeae;
        line-height: 20px;
        font-size: 14px;
    }
}
</style>
